<template>
    <el-form-item label-width="0">
        <el-divider class="custom-divider-margin-top">组件特有属性</el-divider>
        <div class="attributeEDR-editor">
            <div>
                <span class="label_">抽屉大小</span>
                <el-input v-model="optionModels.size"></el-input>
            </div>
            <div>
                <span class="label_">是否显示头部</span>
                <el-switch v-model="optionModels.withHeader"></el-switch>
            </div>
            <div>
                <span class="label_">全屏按钮</span>
                <el-switch v-model="optionModels.fullscreen"></el-switch>
            </div>
            <div>
                <span class="label_">是否显示关闭</span>
                <el-switch v-model="optionModels.showClose"></el-switch>
            </div>
            <div>
                <span class="label_">打开方向</span>
                <el-radio-group v-model="optionModels.direction">
                    <el-radio-button label="ltr">左</el-radio-button>
                    <el-radio-button label="rtl">右</el-radio-button>
                    <el-radio-button label="ttb">上</el-radio-button>
                    <el-radio-button label="btt">下</el-radio-button>
                </el-radio-group>
            </div>
            <div>
                <span class="label_">是否需要遮罩</span>
                <el-switch v-model="optionModels.modal"></el-switch>
            </div>
            <div>
                <span class="label_">遮罩插入body</span>
                <el-switch v-model="optionModels.modalAppendToBody"></el-switch>
            </div>
            <div>
                <span class="label_">抽屉插入body</span>
                <el-switch v-model="optionModels.appendToBody"></el-switch>
            </div>
            <div>
                <span class="label_">点击遮罩可关闭</span>
                <el-switch v-model="optionModels.wrapperClosable"></el-switch>
            </div>
            <div>
                <span class="label_">ESC关闭抽屉</span>
                <el-switch v-model="optionModels.closeOnPressEscape"></el-switch>
            </div>
            <div>
                <span class="label_">关闭时销毁元素</span>
                <el-switch v-model="optionModels.destroyOnClose"></el-switch>
            </div>
        </div>
    </el-form-item>
</template>
<script>

export default {
    name: "attributeEDR-editor",
    components: {},
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object,
    },
    computed: {
        optionModels() {
            return this.selectedWidget.options.attributeEDR
        }
    },
    data() {
        return {}
    }

}
</script>
<style scoped lang="scss">
.attributeEDR-editor {
  > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 5px;

    .el-input {
      width: calc(100% - 132px);
    }

    .label_ {
      display: inline-block;
      width: 120px;
      box-sizing: border-box;
      padding-right: 12px;
      font-size: 13px;
      color: #606266;
    }
  }
}
</style>
